#View Transitions によるアニメーション制御

ブラウザの View Transitions API を活用した新しい<ViewTransition>コンポーネントを導入。UI トランジションのアニメーション実装を簡素化する。

主な特徴：

• <ViewTransition>コンポーネントでアニメーション対象要素をラップ
• startTransition、useDeferredValue、Suspenseでトリガー可能
• CSS でアニメーションをカスタマイズ可能
• 共有要素トランジションのサポート

#Activity による条件付き UI 表示の簡素化

新しい<Activity>コンポーネントを導入。UI の一部を表示・非表示を宣言的に制御できる。

<Activity when={isOpen}>
  <div>表示・非表示を切り替えるUI</div>
</Activity>

主な特徴：

• whenプロパティで表示条件を制御
• 非表示時は DOM から完全に削除
• トランジションと組み合わせて使用可能
• コンポーネントのマウント・アンマウントを簡潔に記述

#Effect 依存配列の自動化

React Compiler を使用して Effect 依存配列を自動で挿入する機能を開発中。これにより：

• 依存配列の手動管理が不要に
• Effect の理解がより直感的に
• コンパイラが IDE と連携し、デバッグ時に挿入された依存配列を表示

#その他の開発中機能

• Fragment Refs：複数の DOM 要素をグループ化して参照可能に
• Concurrent Stores：外部ストアの並行レンダリングを完全サポート
• ジェスチャーアニメーション：View Transitions の拡張機能として検討中

#Gemini nano は不明

Google I/O で Chrome 126 から、Gemini Nano は Chrome デスクトップクライアントに組み込まれるという発表がありましたが、残念ながら組み込まれていないようです。リリースノートに延期という記載もないため不明です。Chrome 127 Beta で利用可能です。

const canCreate = await window.ai.canCreateTextSession();

if (canCreate !== "no") {
  const session = await window.ai.createTextSession();

  const result = await session.prompt("日本の一番高い山は何ですか？");
  console.log(result);

  const stream = session.promptStreaming(
    "次のキーワードを使って短い物語を書いてください：海、鳥"
  );
  for await (const chunk of stream) {
    console.log(chunk);
  }
}

#CSS のみで View Transitions を MPA で行えるようになった

以前から SPA では、View Transitions API を利用することでスムーズな遷移を実現できましたが、MPA でも View Transitions API を利用できるようになりました。

今まで MPA でスムーズな遷移を実現するには、Astro などのように遷移先のページを取得しておくなど JavaScript による処理が必要でした。

View Transition API によるスムーズな遷移 | View Transitions | Chrome for Developers

次の指定を遷移元・遷移先に行うことで、SPA の場合と同じように View Transitions API を利用できます。ただし同一ドメインである制約はあります。

@view-transition {
  navigation: auto;
}

#import assertion ‘assert’ 構文の使用中止と削除

他の環境と同様に import assertion が削除され、SyntaxError を吐くようになりました。with syntax に置き換える必要があります。

- import m from 'foo' assert { type: 'json' }
+ import m from 'foo' with { type: 'json' }

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

#CPU のスロットルを 20 倍にする - DevTools

パフォーマンスタブの CPU で 20x slowdown を選択できるようになりました。M3 MacBook Pro では、CLS の問題を確実に測定および診断することができない問題があったため、より強力な CPU スロットルが必要になったようです。

https://issues.chromium.org/issues/324978881

#その他

Chrome 以外の環境で利用できないものやニッチなものなど。

• URL.parse()
  • リリースノートに書かれていないが出荷されている。
  • このようなコードを書くと二重でパースされてしまう。これを避けるために生えた。
  jsx

  if (URL.canParse(str)) {
    return new URL(str);
  }

  • https://developer.mozilla.org/en-US/docs/Web/API/URL/parse_static
• CloseWatcher API の再有効化
  • dialog 要素や popover 要素を閉じるキー操作や Android の操作を簡単に扱うための API。
  • Chrome 120 で導入されたが、バグがあったため無効化された。
• Gamepad API のトリガーランブル拡張機能
  • ブラウザで Gamepad を使うための API
  • https://developer.mozilla.org/ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API
  • トリガーを振動させることが出来るようになった（？）
• GeolocationCoordinates、GeolocationPosition の toJSON メソッド
  jsx

  navigator.geolocation.getCurrentPosition((position) => {
    console.log(position.toJSON());
  });

#View Transitions API

View Transitions API を利用すれば、画面の更新前後で重複することなく DOM を変更するスムーズな画面遷移を簡単に実現出来ます。モバイルアプリのページ遷移をイメージすると良いでしょう。

今までも実装を頑張れば、このような実装は可能でしたが、View Transitons API の登場によって、より無駄なく簡素な記述で可能になりました。

document.startViewTransition(() => {
	// 画面の更新処理
	navigate(...)
});

.page-header {
  /* 画面遷移中に共有、重複しない要素に名前をつける */
  view-transition-name: page-header;
  contain: paint;
}

/* 画面遷移時に更新前の画面がどのように振る舞うか */
::view-transition-old(root) {
  mix-blend-mode: plus-lighter;
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}

/* 画面遷移時に更新後の画面がどのように振る舞うか */
::view-transition-new(root) {
  mix-blend-mode: plus-lighter;
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}

賢い方は、ここまで見て MPA では利用できなさそうだなと思われるかもしれません。ですが今後 MPA への対応が予定されており、実はすでに実験的な機能としてフラグを有効化すれば利用することが出来ます。興味のある方は、このドキュメントを見てください。

#Style Queris

2022 年 9 月に Chrome 105 でリリースされたコンテナクエリの拡張で、コンテナ要素のスタイルに合わせて、子要素のスタイルを指定できるようになります。

現状 Chrome 111 では、CSS 変数を利用している場合のみ利用できます。

@container style(--theme: warm) {
  .card {
    background-color: wheat;
    border-color: brown;
  }
}

https://developer.chrome.com/blog/style-queries/

#CSS Color Module Level 4

高解像度ディスプレイがサポートされ、選択できる色が 50%増えて 1,600 万色になったらしいです。すごいですね。 また CSS 関数 color()、lch()、oklab()、color-mix()などがサポートされ、12 の新しい色空間と 7 つの新しい色域を利用できるようになりました。

これにより、今まで以上に凝ったデザインを簡単に実現できるようになりますし、特にグラデーションや色を使ったアニメーションはより美しいものを作れるようになるでしょう。

#CSS 三角関数の追加

CSS 関数 sin()、cos()、tan()、acos()、asin()、atan()、atan2(x,y) がサポートされました。

あまり使う機会はないかもしれませんが、例えば波状のアニメーションはとても簡単に実装できるようになりました。

#CSS セレクター の拡張 of S

基本的な記法は:nth-child(an + b of S)です。S にはセレクターを指定し、S の条件に合うものの内 an + b 番目のものを対象に取ります。

/* highlightクラスを持っている子要素の中で2番目を選択する。*/
:nth-child(2 of .highlight) {
}

/* highlightクラスを持っている且つ2番目の子要素を選択する。 */
.highlight:nth-child(2) {
}

S を複数指定することも出来ます。

/* highlightクラスまたはsaleクラスを持っている子要素の中で2番目を選択する */
:nth-child(4 of .highlight, .sale) {
}

これが特に便利なケースとして、Chrome のドキュメントにも挙げられている不可視の要素を省いたスタイル付けが挙げられます。今まではフィルター機能のあるテーブルでストライプ柄を維持するのは面倒でした。

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}